// 1.导入hooks函数
import React from "react";
import {useNavigate,Link,Outlet} from "react-router-dom"

export default function Home(params) {
    // 2.使用hooks函数，并且返回一个函数，hooks函数必须在函数组件中使用
    let navigate=useNavigate();
    function gotoAbout(){
        // 方法二：编程式导航
        // 1.第一种传参方式
        // navigate("/about?id=333&name=李四&age=88")
        // 2.第二种传参方法
        navigate("/about/9527/张三/18")
    }


    return <div>
        <h1>首页标题</h1>
        {/* 方法一：声明式导航 */}
        <Link to="/about?id=123&name=qwe&age=99">关于</Link>
        <button onClick={gotoAbout}>点击跳转到about页面</button>

        <ul>
            {/* 二级路由入口 */}
        <Link to="one">one</Link>
        <Link to="two">two</Link>
        </ul>

        {/* 二级路由组件展示出口 */}
        <Outlet></Outlet>

    </div>
}

